<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">

            <DatePicker type="year" placeholder="选择年份" style="width: 100px" v-model="model1"></DatePicker>

        <Select v-model="model1"  style="width:100px" placeholder="请选择月份">
          <Option value="1"></Option>
          <Option value="2"></Option>
          <Option value="3"></Option>
          <Option value="4"></Option>
          <Option value="5"></Option>
          <Option value="6"></Option>
          <Option value="7"></Option>
          <Option value="8"></Option>
          <Option value="9"></Option>
          <Option value="10"></Option>
          <Option value="11"></Option>
          <Option value="12"></Option>
        </Select>

          <Button type="primary" icon="ios-search" >搜索</Button>
          <Poptip class="pull-right" placement="bottom-end">
            <Button>说明</Button>
            <div slot="content">
              说明：<br>
              1、经济效益报表模块可通过查询条件（默认为当前年月），查询不同时间段，某地区或站点的消耗量情况，下方的统计表格数据默认为全国的消耗量数据。<br>
              2、地图各区块根据不同地区的消耗量的大小显示为不同深浅的颜色；<br>
              3、鼠标悬停在某一区块上时，弹出小框显示当前区块消耗总量；<br>
              鼠标双击全国地图的某个省份，则进入省份的地图,有不同城市的区块；鼠标双击该省份，则返回全国地图<br>
              鼠标单击地图上的某一省份，则选中该省份，同时下方的统计表格数据变为当前省份的数据；<br>
              鼠标单击省份下的城市区块，则选中该城市，同时下方的统计表格数据变为所选择城市的数据；<br>
            </div>
          </Poptip>

      </div>

      <div id="chart-map"></div>

      <Table border :columns="columns1" :data="data1"></Table>
    </Card>
    </Row>
  </div>

</template>

<style scoped>

  #chart-map {
    width: 100%;
    height: 600px;
    display: inline-block;
  }


</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import mapJson from '@/assets/mapJson/json.js';
  import * as echarts from 'echarts';
  import 'echarts/component/legend';
  import 'echarts/chart/bar';
  import 'echarts/chart/map';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/markPoint';
  import 'echarts/component/visualMap';
  import 'echarts/component/title';

  let echartsMap = null;
  let myChartMap = null;
  let menu = null;

  export default {
    beforeMount () {

    },
    mounted() {
      let $this = this;
      echartsMap = document.getElementById('chart-map');
      myChartMap = echarts.init(echartsMap);
      echarts.registerMap('swd', mapJson.all);

      this.initMap();

      for (var key in mapJson){
        echarts.registerMap(key, mapJson[key]);
      }
      //监听左键事件,选中数据
      myChartMap.on('click', function (params) {
          console.log(params);
        let city = params.name;
        $this.selected = city;
        //后台请求，myChartBar.setOption(setBarOption($this.selected,xdata,ydata),true);
      });
      //监听左键双击事件，切换全国与省份
      myChartMap.on('dblclick', function (params) {
        console.log(params);
        let city = params.name;
        if ($this.showMap){
          $this.goToChart(city)
        }else {
          $this.initMap();
        }
      });
    },
    data () {
      return {
        showMap: 1,//1为全国地图 0为省
        model1: '',
        selected: [],
        optionMap:{},
        columns1: [
          {
            title: '地区',
            key: 'province'
          },
          {
            title: '消耗总数(m³)',
            key: 'total'
          },
          {
            title: '最大消耗量(m³)',
            key: 'max'
          },
          {
            title: '最小消耗量(m³)',
            key: 'min'
          },
          {
            title: '消耗平均值(m³)',
            key: 'average'
          },
            {
                title: '站点个数(个)',
                key: 'num'
            },
          {
            title: '高于平均值站点数(个)',
            key: 'heigher'
          },
          {
            title: '低于平均值站点数(个)',
            key: 'below'
          }
        ],
        data1: [
          {
            province: '浙江',
            total: 302987,
            max: '2321(嘉通加气站)',
            min:'1342(乍浦加气站)',
            average:'2098',
              num:80,
            heigher:'23',
            below:'14'
          },

        ]
      }
    },
    methods: {
      initMap() {
        let $this = this;
        $this.showMap = 1;
        $this.optionMap = {
          title: {
            text: '经济效益分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
          },
          series: [
            {
              name: '消耗总量',
              type: 'map',
              mapType: 'swd',
              roam: false,
              selectedMode: 'single',
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              data:[]
            }
          ]
        };
        $this.optionMap.series[0].markPoint = null;
        $this.optionMap.series[0].data = [
          {name: '北京',value: $this.randomData() },
          {name: '天津',value: $this.randomData() },
          {name: '上海',value: $this.randomData() },
          {name: '重庆',value: $this.randomData() },
          {name: '河北',value: $this.randomData() },
          {name: '河南',value: $this.randomData() },
          {name: '云南',value: $this.randomData() },
          {name: '辽宁',value: $this.randomData() },
          {name: '黑龙江',value: $this.randomData() },
          {name: '湖南',value: $this.randomData() },
          {name: '安徽',value: $this.randomData() },
          {name: '山东',value: $this.randomData() },
          {name: '新疆',value: $this.randomData() },
          {name: '江苏',value: $this.randomData() },
          {name: '浙江',value: $this.randomData() },
          {name: '江西',value: $this.randomData() },
          {name: '湖北',value: $this.randomData() },
          {name: '广西',value: $this.randomData() },
          {name: '甘肃',value: $this.randomData() },
          {name: '山西',value: $this.randomData() },
          {name: '内蒙古',value: $this.randomData() },
          {name: '陕西',value: $this.randomData() },
          {name: '吉林',value: $this.randomData() },
          {name: '福建',value: $this.randomData() },
          {name: '贵州',value: $this.randomData() },
          {name: '广东',value: $this.randomData() },
          {name: '青海',value: $this.randomData() },
          {name: '西藏',value: $this.randomData() },
          {name: '四川',value: $this.randomData() },
          {name: '宁夏',value: $this.randomData() },
          {name: '海南',value: $this.randomData() },
          {name: '台湾',value: $this.randomData() },
          {name: '香港',value: $this.randomData() },
          {name: '澳门',value: $this.randomData() }
        ];
        myChartMap.setOption($this.optionMap);
      },
      goToChart(city){
        let $this = this;
        $this.selected = [];
        $this.showMap = 0;
        $this.optionMap.series[0].mapType = city;
//        $this.optionMap.series[0].data = [
//          {name: '嘉兴市',value: $this.randomData() },
//          {name: '杭州市',value: $this.randomData() }
//        ];
//        let markPoint  = {
////		    effect:{show:true},
//          symbolSize: 5,
//          itemStyle: {
//            normal: {
//              borderColor: '#87cefa',
//              borderWidth: 1.5,            // 标注边线线宽，单位px，默认为1
//              label: {
//                show: false
//              }
//            },
//            emphasis: {
//              borderColor: '#1e90ff',
//              borderWidth: 5,
//              label: {
//                show: false
//              }
//            }
//          },
//          data :[
//            {name: '杭州气站', coord: [120.1750375350,30.2077743694]},
//            {name: '海盐气站', coord: [120.9934455957,30.5871005878]},
//          ]
//        };
//        $this.optionMap.series[0].markPoint = markPoint;
        myChartMap.setOption($this.optionMap);
      },
      randomData() {
        return Math.round(Math.random()*1000);
      }
    },
    watch: {
      selecting(val){
        console.log(val);
      }
    }

  };
</script>
